<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../Core4j.js"></script>
<link rel="StyleSheet" href="../tabletree4j.css" type="text/css" />
<script language="JavaScript" src="../TableTree4j.js"></script>
<script language="JavaScript" src="../plugin/JsonTreeViewer4js.js"></script>


<title>tabletree4j version 2 - Demo JsonTreeViewer</title>
<style>
	.arrow-tt-node-click-content{
		font-size:12px;
		margin-top:3px;
	}

	.tabletree4j-menu td{
		padding:0;
		height:20px;
	}



</style>

<style>

	.bigtitle{
		font-family:Arial;
		font-weight:bold;
		font-size:22px;
		margin-bottom:10px;
	}
	.footer{
		font-family:Arial;
		font-weight:bold;
		font-size:12px;
		color:#747474;
	}

	.title{
		padding-left:10px;
		font-family:Arial;
		/*font-weight:bold;*/
		font-size:18px;
		color:#747474;
	}

	.fromtitle{
		background-color:#f5f5f5;
		text-align:center;
		font-family:Arial;
		color:#acac59;
		padding-top:5px;
		padding-bottom:5px;
	}

	.fromcontent{
		font-family:Arial;
		padding-right:5px;
		padding-bottom:10px;
		padding-top:10px;
	}

	.content{
		font-family:Arial;
	}
	.clickbtn{
		cursor:pointer;
	}
	.headerbg{
		background:#328aa4 url(img/tr_back.gif) repeat-x;color:#fff;
		height:27px;
		font-family:"Arial";
	}
	.headerbg td{
		text-align:center;
	}


</style>
</head>
<body >
	<div id="header" style="height:60px;">
	<div style="float:left;width:100%;">
	<div style="float:left;width:24%;height:60px;"><img src="../tabletree4j.png"/></div>
	<div style="float:right;width:74%;height:60px;">
	<div class="title" style="padding-top:35px;text-align:right;color:#828282;">Demo -Plugin JsonTreeViewer</div>
	</div>
	</div>


	<div style="float:left;width:100%;height:1px;border-bottom:1px solid #c8c8c8;"></div>
	</div>

<div class="title" style="margin-top:20px;float:left;width:99%">
Please input json string:
</div>
<div style="float:left;width:100%">
<textarea id="jsonArea" style="width:50%;height:100px"></textarea><br/>
<button onclick="parseJsonTreeView()">Parse</button>
</div>
<div id="jsonviewer" style="margin-top:5px;float:left;width:100%">

</div>
<script language="javascript">
var jsonTree=new Core4j.toolbox.TableTree4j({
renderTo:'jsonviewer',
plugins:[new JsonTreeViewer4js()]
});

function parseJsonTreeView(){
	var jsonString=document.getElementById("jsonArea").value;
	if (jsonString == null || jsonString == '') {
		alert("Json string must not be null!");
	}else {
		jsonTree.buildJsonTreeViewer({
			jsonparam: jsonString,
			onJsonparamErrorEvent: jsonerrfun
		});
	}
}

function jsonerrfun(msg,tabletreeobj){
	alert(msg);
}
var json={aa:3,bb:[11,22,33]};

//alert(Core4j.jsonObjectToString(json));

</script>



	<div id="footer" class="footer" align="center" style="float:left;width:99%"><br/>
TABLETREE4J VESION 2 Demo<br/>
license apache licence V2.0<br/>
2010 LKE Technology Lab<br/>
Email:<a href="mailto:lannerk@qq.com">lannerk@qq.com</a><br/><br/>
	</div>
</body>
</html>
